<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>生命周期钩子</h2>
      <p>count: {{ count }}</p>
      <button @click="count++">btn</button>
      <ul>
        <li v-for="item in list" :key="item._id">{{ item.title }}</li>
      </ul>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            count: 10,
            list: [],
          };
        },
        methods: {
          fn() {},
        },
        // template选项相当于js的outerHtml的属性
        // template: "<div>xxxx</div>",
        // 第一个阶段创建阶段
        beforeCreate() {
          console.log("beforeCreate", this.count, this.fn);
          fetch("http://www.pudge.wang:3080/api/rated/list")
            .then((response) => response.json())
            .then((res) => {
              console.log(res);
              this.list = res.result;
            });
        },
        // 在这个中间vue自己去初始化了选项api
        created() {
          console.log("created", this.count, this.fn);
        },

        // 在这个中间vue自己检查是否有template选项

        // 第二个阶段挂载阶段
        beforeMount() {
          // 这里还拿不到dom节点
          console.log("beforeMount", document.querySelector("#app").innerHTML);
        },

        // 在这个中间vue自己去初始化了渲染创建和插入dom节点

        mounted() {
          // 这里可以获取到dom节点了
          // 比如希望去获取一些元素的dom信息的时候，就必须要在mounted里面做
          // 数据请求可以在created，beforeMount，mounted里面都可以做
          console.log("mounted", document.querySelector("#app").innerHTML);
        },

        // 第三个阶段更新阶段
        // 不会自动执行，需要当数据发生改变的时候
        // beforeUpdate和updated都是在数据改变以后执行的
        // 是页面重新渲染的前后
        // 数据的改变和页面的渲染不是同时发生的
        beforeUpdate() {
          console.log(
            "beforeUpdate",
            this.count,
            document.querySelector("p").innerHTML
          );
        },

        // 在这里vue会重新渲染页面

        updated() {
          // 在更新后的时候，不要去修改数据，会造成死循环的
          console.log(
            "updated",
            this.count,
            document.querySelector("p").innerHTML
          );
          // this.count++;
        },

        // 第四个阶段卸载阶段
        beforeUnmount() {
          /*
            1. 清除定时器
            2. 关闭原生js的事件监听
            3. webscoket长连接
            4. 地图map和图表echarts等第三方插件，销毁这些实例，以释放内存
          */
          console.log("beforeUnmount");
        },
        unmounted() {
          console.log("unmounted");
        },
      }).mount("#app");
    </script>
  </body>
</html>
